<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Login and Register Example</title>
    <!-- 引入vue.js，可通过CDN引入，这里以官方CDN为例 -->
    <script src="./js/vue.2.6.14.js"></script>
    <!-- 引入axios库，用于模拟网络请求，同样通过CDN -->
    <script src="./js/vue-router.js"></script>
    <script src="./js/axios.min.js"></script>
    <style>
        /* 简单的全局样式，可自行按需扩展美化 */
        body {
            font-family: Arial, sans-serif;
        }

        .form-container {
            width: 300px;
            margin: 50px auto;
            border: 1px solid #ccc;
            padding: 20px;
            border-radius: 5px;
        }

        h2 {
            text-align: center;
        }

        input {
            width: 100%;
            padding: 5px;
            margin-bottom: 10px;
        }

        button {
            width: 100%;
            padding: 8px;
        }
    </style>
</head>

<body>
<!-- 用于挂载Vue实例的DOM元素 -->
<div id="app">
1111111
</div>

<script>
    // 定义登录组件
    const LoginComponent = {
        template: `
        <div class="form-container">
          <h2>登录</h2>
          <form @submit.prevent="handleLogin">
            <input type="text" v-model="username" placeholder="用户名" />
            <input type="password" v-model="password" placeholder="密码" />
            <button type="submit">登录</button>
          </form>
        </div>
      `,
        data() {
            return {
                username: '',
                password: ''
            };
        },
        methods: {
            handleLogin() {
                const data = {
                    username: this.username,
                    password: this.username
                };
                // 模拟发送登录请求到后端接口（这里用 /api/login 作为示例路径）
                axios.post('http://localhost:8888/loginregister/login', data)
                    .then(response => {
                        if (response.data.success) {
                            alert('登录成功');
                            // 这里可以添加登录成功后的页面跳转等逻辑，比如改变页面显示内容等
                        } else {
                            alert('登录失败，请检查用户名和密码');
                        }
                    })
                    .catch(error => {
                        console.error(error);
                        alert('网络错误，请稍后再试');
                    });
            }
        }
    };

    // 定义注册组件
    const RegisterComponent = {
        template: `
        <div class="form-container">
          <h2>注册</h2>
          <form @submit.prevent="handleRegister">
            <input type="text" v-model="username" placeholder="用户名" />
            <input type="password" v-model="password" placeholder="密码" />
            <input type="password" v-model="confirmPassword" placeholder="确认密码" />
            <input type="email" v-model="email" placeholder="邮箱" />
            <button type="submit">注册</button>
          </form>
        </div>
      `,
        data() {
            return {
                username: '',
                password: '',
                confirmPassword: '',
                email: ''
            };
        },
        methods: {
            handleRegister() {
                if (this.password!== this.confirmPassword) {
                    alert('两次密码不一致，请重新输入');
                    return;
                }
                const data = {
                    username: this.username,
                    password: this.password,
                    email: this.email
                };
                // 模拟发送注册请求到后端接口（这里用 /api/register 作为示例路径）
                axios.post('http://localhost:8888/loginregister/register', data)
                    .then(response => {
                        if (response.data.success) {
                            alert('注册成功，请登录');
                            // 可以添加注册成功后跳转到登录页面等逻辑
                        } else {
                            alert('注册失败，请检查输入信息');
                        }
                    })
                    .catch(error => {
                        console.error(error);
                        alert('网络错误，请稍后再试');
                    });
            }
        }
    };

    // 配置路由
    const router = new VueRouter({
        routes: [
            { path: '/login', component: LoginComponent },
            { path: '/register', component: RegisterComponent }
        ]
    });

    // 创建Vue实例并挂载到页面元素上
    const app = new Vue({
        el: '#app',
        router: router
    });
</script>
</body>

</html>